import { loginAPI } from "@/api/user";
import { setToken, getToken, removeToken } from "@/utils/auth";
export default {
  // 开启命名空间
  namespaced: true,
  // 官方推荐函数写法
  state: {
    token: getToken() || "",
  },
  mutations: {
    // mutations 中的方法 只有一种调用方式 store.commit('mutations中的方法名')  没有 方法名() 的调用方式
    setToken(state, newToken) {
      state.token = newToken;
      setToken(newToken);
    },
    removeToken(state) {
      state.token = "";
      removeToken();
    },
  },
  actions: {
    async loginAction(store, data) {
      const {
        data: { token },
      } = await loginAPI(data);
      store.commit("setToken", token);
    },
  },
};

// 组件中使用
// 使用次数少用1，次数多用2

// 使用state中的数据
// 1. 直接使用：this.$store.state.模块名.数据项名
// 2. 辅助函数：import {mapState} from 'vuex'
//             computed: {
//              ...mapState('模块名',['属性名1','属性名2',....])
//             }

// 使用getters中的数据
// 1. 直接使用：this.$store.getters['模块名/属性名']
// 2. 辅助函数：import {mapGetters} from 'vuex'
//             computed: {
//              ...mapGetters('模块名',['方法名1','方法名2',....])
//             }

// 使用mutations的方法
// 1. 直接使用：this.$store.commit('模块名/方法名',参数) 参数只能传一个，传多个需要放在对象中
// 2. 辅助函数：import { mapMutations } from "vuex"
//             methods: {
//              ...mapMutations('模块名',['方法名1','方法名2',....])
//             }

// 使用actions的方法
// 1. 直接使用：this.$store.dispatch('模块名/方法名',参数) 参数只能传一个，传多个需要放在对象中
// 2. 辅助函数：import { mapActions } from "vuex"
//             methods: {
//              ...mapActions('模块名',['方法名1','方法名2',....])
//             }
